<template>
  <el-container>
    <el-main>
      <search context="查找用户" @search-name="searchName">
        <el-switch
          v-model="data.role"
          active-text="全部队员"
          active-color="#ff4949"
          inactive-color="#13ce66"
          inactive-text="现役队员"
          @change="changeStatus"
        />
      </search>
      <el-tabs v-model="data.days" type="border-card" style="text-align: center" @tab-click="handleClick">
        <el-tab-pane label="最近一周" name="7" />
        <el-tab-pane label="最近一月" name="30" />
        <el-tab-pane label="最近一年" name="365" />
        <el-tab-pane name="36500">
          <span slot="label"><i class="el-icon-s-data" /> 总题数</span>
        </el-tab-pane>

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{backgroundColor: '#f6f6f6',
                               color: '#0b0b0b', padding: '9px 0'}"
          :cell-style="{color:'#0b0b0b', padding: '10px 0'}"
          stripe
        >
          <el-table-column align="center" type="index" :index="getIndex" label="名次" width="80" />

          <el-table-column align="center" prop="userName" label="用户名" width="120">
            <span slot-scope="scope">
              <detail-profile :id="scope.row.userId" :user-name="scope.row.userName" />
            </span>
          </el-table-column>
          <el-table-column align="center" prop="userMotto" label="座右铭" />
          <el-table-column align="center" prop="userSchool" label="学校" sortable width="120" />
          <el-table-column align="center" prop="userGrade" label="年级" sortable width="100" />
          <el-table-column align="center" prop="solved" label="通过数" width="70" />
          <el-table-column align="center" prop="submission" label="提交数" width="70" />
          <el-table-column align="center" prop="ratio" label="通过率" width="80">
            <template slot-scope="scope">
              {{ getRatio(scope.row) }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="pageSize"
          :current-page="data.page"
          :total="total"
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
        />
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import Search from '@/components/Search'
import { showRank } from '@/networks/rank'
import DetailProfile from '@/components/detailProfile'

export default {
  name: 'Rank',
  components: { DetailProfile, Search },
  data() {
    return {
      loading: true,
      pageSize: 1,
      total: 1,
      tableData: [],
      data: {
        days: '7',
        page: 1,
        role: false,
        userName: ''
      },
      startRow: 1
    }
  },
  mounted() {
    this.showRank()
  },
  methods: {
    showRank() {
      this.loading = true
      showRank(this.data)
        .then(res => {
          this.loading = false
          if (res.data.status === 0) {
            this.$message.warning(res.data.msg)
          } else {
            const data = res.data.data
            console.log(data)
            this.startRow = data.startRow
            this.tableData = data.list
            this.total = data.total
            this.pageSize = data.pageSize
          }
        })
    },
    handleCurrentChange(index) {
      this.data.page = index
      this.showRank()
    },
    handleClick() {
      this.showRank()
    },
    searchName(userName) {
      this.data.userName = userName
      this.showRank()
    },
    getRatio(row) {
      return (row.solved === 0 ? 0 : (row.solved / row.submission * 100).toFixed(2)) + '%'
    },
    getIndex(index) {
      return index + this.startRow
    },
    changeStatus() {
      this.showRank()
    }
  }
}
</script>

<style scoped>

  .el-tabs {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1200px;
    height: auto;
    margin-top: 20px;
  }

  .el-switch {
    float: right;
    position: relative;
    right: 20px;
  }

  .el-pagination {
    margin-top: 20px;
  }
</style>
